import React, { Component } from 'react'
import './App.css'
import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'
export default class App extends Component {
	// 初始化状态
	state = {todos:[
		{id:'001', name:'吃饭', done:true},
		{id:'002', name:'睡觉', done:true},
		{id:'003', name:'打代码', done:false}
	]}
	// 新增一个todu对象
	addTodo = (todoObj) => {
		console.log('todoObj', todoObj)
		const {todos} = this.state
		const newTodos = [todoObj, ...todos]
		this.setState({todos: newTodos})
	}
	// 更新一个todo对象
	changeToduList = (done, id) => {
		let {todos} = this.state
		// 匹配处理数据 更新一个对象数组中的某条数据适合用map
		const newTodos = todos.map(item => {
			if (item.id === id) return {...item, done}
			else return item
		})
		this.setState({todos: newTodos})
	}
	// 删除事件
	deleteTodo = (id) => {
		const {todos} = this.state
		// 删除一个对象数组中的某条数据适合用filter
		const newTodos = todos.filter((item) => {
			return item.id !== id
		})
		this.setState({todos:newTodos})
	}
	// 全选事件
	checkedAll = (done) => {
		const {todos} = this.state
		// 删除一个对象数组中的某条数据适合用filter
		const newTodos = todos.map((item) => {
			return {...item, done}
		})
		this.setState({todos:newTodos})
	}
	// 清除已完成的
	clearDone = () => {
		const {todos} = this.state
		// 删除一个对象数组中的某条数据适合用filter
		const newTodos = todos.filter((item) => {
			return !item.done
		})
		this.setState({todos:newTodos})
	}
	render() {
		const {todos} = this.state
		return (
			<div style={{width: '380px', padding: '20px'}}>
				<Header addTodo={this.addTodo}/>
				<List todos={todos} changeToduList={this.changeToduList} deleteTodo={this.deleteTodo}/>
				<Footer todos={todos} checkedAll={this.checkedAll} clearDone={this.clearDone}/>
			</div>
		)
	}
}